<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
import { mpostlistServer, } from "@/api/mpost.js"
import { rpostlistServer, } from "@/api/rpost.js"
import { ref } from 'vue';
import { ElMessage, FormRules } from 'element-plus';
import { addServer } from "@/api/rpost.js"
import {
    Check,
    Pointer,
    WarnTriangleFilled
} from '@element-plus/icons-vue'
const mpostdata = ref()
const rpostdata = ref()
const mpost = ref({ "title": '', "content": '', "username": '', "sectionname": '', "replies": '', "clicks": '', "isjing": '' ,"jubao":'',"mid":''})
const rpost = ref([])
const display = ref(false)

interface RuleForm {
    content: String,
    mid: Number
}


const addData = ref<RuleForm>({
    content: '',
    mid: route.params.mid as unknown as Number
})

const id = ref(route.params.mid)
const mid = ref()
const mpostData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 100,
    }

    let result = await mpostlistServer(params)
    mpostdata.value = result.data.items
    mid.value = mpostdata.value.mid
    for (let key in mpostdata.value) {
        if (id.value == key) { mpost.value = mpostdata.value[key] }
    }
}
const rpostData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 100,
    }

    let result = await rpostlistServer(params)
    rpostdata.value = result.data.items
    for (let key in rpostdata.value) {
        if (id.value == rpostdata.value[key].mid) { rpost.value.push(rpostdata.value[key]) }
    }
}

rpostData()
mpostData()

const displayadd = async () => {
    display.value = true
}

const clearadddata = () => {
    addData.value = {
        content: '',
        mid: route.params.mid as unknown as Number
    }
}
import moment from 'moment';
const addpost = async () => {
    let result = await addServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '发布成功')
    clearadddata()
    rpost.value.length = 0
    rpostData()
}
import { jubaoServer } from '@/api/mpost.js';
const jubao = async (id) => {
    let result = await jubaoServer(id) as any;
    ElMessage.success(result.message ? result.message : '操作成功')
    clearadddata()
    mpostData()
}

</script>
<template>
    <div class="active">
        <el-container>
            <el-header>
            </el-header>
            <el-main>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;height: 60px;">
                    <el-row>
                        <el-text tab="b" size="large" style="width: 300px;margin-left: 600px;">{{ mpost.title
                            }}</el-text>
                        <el-text tag="p" size="large" type="info" style="margin-left: 100px;margin-right: 20px;">{{
                            mpost.replies + "/" +
                            mpost.clicks }}</el-text>
                        <el-text type="danger" size="large" v-if="mpost.isjing === '是'"
                            style="margin-left: 80px;margin-right: 0px;">精华</el-text>
                        <el-text tag="i" size="default" type="success"
                            style="margin-right: 20px;margin-left: 100px;">用户:</el-text>
                        <el-text tag="i" size="default" type="info">{{ mpost.username }}</el-text>
                    </el-row>
                </el-card>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;">
                    <el-text tag="p" size="large" type="info"
                        style="margin-left: 20px; margin-right: 20px;margin-bottom: 50px;">{{
                            mpost.content }}</el-text>
                    <el-divider />
                    <el-button type="success" :icon="Pointer" circle
                        @click="mpost.clicks = mpost.clicks + 1; ElMessage.success('点赞成功')"
                        style="margin-left: 20px; margin-right: 20px;margin-bottom: 50px;" />
                    <el-button type="warning" :icon="WarnTriangleFilled" circle
                        @click="jubao(mpost.mid); ElMessage.success('举报成功')"
                        style="margin-left: 20px; margin-right: 20px;margin-bottom: 50px;" />
                    <el-button type="primary" round @click="displayadd()"
                        style="margin-left: 20px; margin-right: 20px;margin-bottom: 50px;">参与回复</el-button>
                </el-card>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;" router v-for="data in rpost">
                    <el-text tag="b" size="large" type="primary" style="width: 50px;">[回复]</el-text>
                    <el-text tag="i" size="default" type="success"
                        style="margin-right: 20px;margin-left: 20px;">用户:</el-text>
                    <el-text tag="i" size="default" type="info">{{ data.username }}</el-text>
                    <el-divider />
                    <el-text tag="p" size="large" type="info"
                        style="margin-left: 20px; margin-right: 20px;margin-bottom: 50px;">{{
                            data.content }}</el-text>
                    <el-divider />
                    <el-text tag="i" size="large" type="info" style="margin-left: 10px;margin-right: 20px;">{{
                        data.clicks }}</el-text>
                    <el-text tag="i" size="large" type="info" style="margin-left: 10px;margin-right: 0px;">
                        {{ moment(data.time).format('YYYY-MM-DD HH:mm') }}</el-text>
                    <div style="margin-top: 20px;margin-bottom: 20px;">
                        <hr>
                    </div>
                </el-card>
            </el-main>
            <el-footer>
            </el-footer>
        </el-container>
    </div>
    <el-dialog v-model="display" title="发布帖子" width="500">
        <el-form ref="form" class="add" :model="addData">
            <el-form-item label="帖子内容">
                <el-input placeholder="请输入帖子内容" v-model="addData.content" style="height: 300px;"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="display = false, clearadddata()">取消</el-button>
                <el-button type="primary" @click="addpost(), display = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.active {
    height: 100%;

    .el-header {
        background: url('@/assets/section.jpg') no-repeat center / cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;


    }

    .el-main {
        background-color: #D1CFB9;


        .el-row {

            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-col {
                text-align: center;
            }
        }

    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D1CFB9;
        height: 400px;
    }

}
</style>